// src/views/pro/Search.tsx
import { Input, Select, Space, Button, Table, Image, Switch } from 'antd'
import { useEffect, useState } from 'react'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { getCategoryList, getProList, getSearchProList } from '../../api/pro'

type SearchProps = {}
// 产品接口约束
interface DataType {
  proid: string;
  proname: string;
  img1: string;
  originprice: number;
  discount: number;
  sales: number;
  stock: number;
  category: string;
  brand: string;
  issale: number;
  isrecommend: number;
  isseckill: number;
}

export const Search = (props: SearchProps) => {
  const [proList, setProList] = useState<DataType[]>([]) // 表格数
  const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据
  const [category, setCategory] = useState<string>('') //分类搜索条件
  const [search, setSearch] = useState<string>('') // 关键词搜索

  const [current, setCurrent] = useState<number>(1) // 页码
  const [pageSize, setPageSize] = useState<number>(5) // 每页显示个数

  const getProListData = async () => { // 请求表格数据
    const res = await getProList()
    setProList(res.data.data)
  }

  const getCategoryListData = async () => { // 请求分类的数据
    const res = await getCategoryList()
    setCategoryList(res.data.data)
  }

  useEffect(() => {
    getProListData()
    getCategoryListData()
  }, [])


  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <Space>
        <Select value={category} style={{ width: 120 }} onChange={value => {
          console.log(value)
          setCategory(value)
        }}>
          <Select.Option key='all' value="">全部</Select.Option>
          {
            categoryList && categoryList.map(item => {
              return (
                <Select.Option key={item} value={item}>{item}</Select.Option>
              )
            })
          }
        </Select>
        <Input placeholder='请输入关键词' value={search} onChange={e => setSearch(e.target.value)} />
        <Button type='primary' onClick={async () => {
          const res = await getSearchProList({
            category,
            search
          })
          setProList(res.data.data)
        }}>搜索</Button>
        <Button type='primary' onClick={() => {
          const arr = JSON.parse(JSON.stringify(proList))
          arr.sort((a: DataType, b: DataType) => a.originprice - b.originprice)
          setProList(arr)
        }}>价格升序</Button>
      </Space>
      <Table
        dataSource={proList}
        rowKey="proid"
        bordered
        scroll={{ y: document.body.offsetHeight - 330 }}
        pagination={{
          current,
          pageSize,
          showTotal: (total) => {
            return <span> 共有 {total} 条数据</span>
          },
          onChange(page, pageSize) {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
      >
        <Table.Column
          title="序号"
          render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
        ></Table.Column>
        <Table.Column
          title="分类"
          dataIndex="category"
        ></Table.Column>
        <Table.Column
          title="品牌"
          dataIndex="brand"
        ></Table.Column>
        <Table.Column
          title="名称"
          dataIndex="proname"
          render={(text) => { return text.length > 10 ? text.substring(0, 10) + "..." : text }}
        ></Table.Column>
        <Table.Column
          title="图片"
          dataIndex="img1"
          render={(text) => { return <Image src={text} width={80} height={80} /> }}
        ></Table.Column>
        <Table.Column
          title="价格"
          dataIndex="originprice"
          sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
        ></Table.Column>
        <Table.Column
          title="折扣"
          dataIndex="discount"
          sorter={(a: DataType, b: DataType) => a.discount - b.discount}
        ></Table.Column>
        <Table.Column
          title="销量"
          dataIndex="sales"
          sorter={(a: DataType, b: DataType) => a.sales - b.sales}
        ></Table.Column>
        <Table.Column
          title="库存"
          dataIndex="stock"
          sorter={(a: DataType, b: DataType) => a.stock - b.stock}
        ></Table.Column>
        <Table.Column
          title="是否上架"
          dataIndex="issale"
          render={(text) => { return <Switch checked={text === 1} /> }}
        ></Table.Column>
        <Table.Column
          title="是否推荐"
          dataIndex="isrecommend"
          render={(text) => { return <Switch checked={text === 1} /> }}
        ></Table.Column>
        <Table.Column
          title="是否秒杀"
          dataIndex="isseckill"
          render={(text) => { return <Switch checked={text === 1} /> }}
        ></Table.Column>
        <Table.Column
          title="操作"
          render={(text, record: DataType, index) => {
            return (
              <Space>
                <Button type="primary" shape="circle" icon={<EditOutlined />} />
                <Button danger shape="circle" icon={<DeleteOutlined />} />
              </Space>
            )
          }}
        ></Table.Column>
      </Table>
    </Space>
  );
}